<div class="gw-gr gw-non-selectable" gw-graph-type="bar" style="height:100px;min-width:400px;display:inline-block;max-width:580px;padding-left:10px;padding-right:1px;padding-top:1px;padding-bottom:1px;" xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://xmlns.jcp.org/jsf/html" xmlns:c="http://xmlns.jcp.org/jsp/jstl/core">
    <div class="gw-gr-head">
        <div style="font-size:12px;font-weight:bold;text-align:center;margin-top:5px;margin-bottom:10px;">
            #{trdBnTopN.reporter} <i class="#{trdBnTopN.tradeFlowFA}"></i> #{trdBnTopN.tradeFlow}: #{trdBnTopN.UI_TOP_PARTNERS}<br/>
            (<b>#{trdBnTopN.commodityCode}</b>) #{trdBnTopN.commodityName}
        </div>
        <div class="gw-gr-drag-back">
            <div class="gw-gr-drag-back-start"/>
            <div class="gw-gr-drag gw-gr-drag-left"><div class="gw-gr-drag-inside"/></div>
            <div class="gw-gr-drag-middle"/>
            <div class="gw-gr-drag gw-gr-drag-right"><div class="gw-gr-drag-inside"/></div>
            <div class="gw-gr-drag-back-end"/>
        </div>
    </div>
    <div class="gw-gr-body" style="height:150px;"></div>
    <div class="gw-gr-foot" style="text-align:center;">
        <c:forEach items="#{trdBnTopN.columns}" var="c">
            <div class="gw-table-cell gw-gr-legend-block" style="cursor:pointer;" onclick="onTopNClick('#{c.urlCode}');"><div class="gw-table-cell-graph gw-gr-legend" style="background:#{c.color};"></div><div class="gw-table-cell gw-gr-legend-text">#{c.name}</div></div>
        </c:forEach>
    </div>
    <table style="width:100%;">
        <thead>
            <tr>
                <th gw-gr-type="x" gw-gr-id="period_id">#{trdBnTopN.UI_TITLE_PERIOD}</th>
                <c:forEach items="#{trdBnTopN.columns}" var="d">
                    <th gw-gr-type="g" gw-gr-color="#{d.color}" gw-id="#{d.urlCode}">#{d.name}
                        <div class="gw-balloon-content" style="border-color:#{d.color}">
                            <table style="max-width:150px;">
                                <tr><td class="gw-bllb">#{trdBnTopN.UI_TITLE_REPORTERS}:</td><td class="gw-blv">#{trdBnTopN.reporter}</td></tr>
                                <tr><td class="gw-bllb">#{trdBnTopN.UI_TITLE_TRADE_FLOW}:</td><td class="gw-blv">#{trdBnTopN.tradeFlow}</td></tr>
                                <tr><td class="gw-bllb">#{trdBnTopN.UI_TITLE_PARTNER}:</td><td class="gw-blv">#{d.name}</td></tr>
                                <tr><td class="gw-bllb">#{trdBnTopN.UI_TITLE_PERIOD}:</td><td class="gw-blv">[x]</td></tr>
                                <tr><td class="gw-bllb">#{trdBnTopN.UI_TITLE_TRADE_VALUE}:</td><td class="gw-blv">[valueSF] #{trdBnTopN.UI_VALUE_UOM_USD}</td></tr>
                                <tr><td class="gw-bllb">#{trdBnTopN.UI_TITLE_TRADE_SHARE_TOTAL}:</td><td class="gw-blv">[share]</td></tr>
                                <tr><td class="gw-bllb">#{trdBnTopN.UI_TITLE_COMMODITY}:</td><td class="gw-blv">#{trdBnTopN.commodityCode}</td></tr>
                                <tr><td class="gw-blv" colspan="2">#{trdBnTopN.commodityName}</td></tr>
                            </table>
                        </div>
                    </th>
                </c:forEach>
            </tr>
        </thead>
        <tbody>
            <c:forEach items="#{trdBnTopN.rows}" var="dr">
                <tr style="display:none;">
                    <td gw-grv="#{dr.periodId}">#{dr.periodId}</td>
                    <c:forEach items="#{trdBnTopN.columns}" var="cl">
                        <td gw-grs="#{dr.getItem(cl.id).shareStr}" gw-grv="#{dr.getItem(cl.id).value}">#{dr.getItem(cl.id).valueStr}</td>
                    </c:forEach>
                </tr>
            </c:forEach>
        </tbody>
    </table>
</div>
